<template>
  <div class="timelinediv">
    <div class="demo-date-picker">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
    </div>
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.eventDate">
        {{ activity.doorName }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import sppApi from '@/api/spp'
export default {
  name: 'PersonLocus',
  props: {
    userId: {
      type: String,
      default: '1'
    },
    eventDate: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      activities: [],
      total: 0,
      pageInfo: { jobNo: '', dayParam: '2022-03-11' }
    }
  },
  mounted() {
    this.initLoadData()
  },
  methods: {
    initLoadData() {
      this.activities = []
      sppApi.getInoutTimeline().then((res) => {
        if (res.code === 200) {
          this.activities = res.data
        }
      })
    }
  }
}
</script>
<style>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  display: none;
}
.timelinediv {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
